<template>
	<view class="goods-details">
		<!-- 商品图片区域 -->
		<view class="details" scroll-y>
			<view class="logo-container">
				<image :src="goodsDetails.goods_big_logo" mode="aspectFit" class="logo-image"></image>
			</view>
			<!-- 商品价格 -->
			<view class="price-container">
				<text class="price">￥{{ goodsDetails.price }}</text>
			</view>
			<!-- 商品名称 -->
			<view class="name-container">
				<text class="name">{{ goodsDetails.name }}</text>
			</view>
			<!-- 购买数量 -->
			<view class="num-container">
				<text class="tag">数量</text>
				<view class="num-oper">
					<view @tap="reduceNum" class="num-button">-</view>
					<view class="num-display">{{ buyNum }}</view>
					<view @tap="addNum" class="num-button">+</view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="info-container">
				<view class="brand">
					<text class="tag">品牌</text>{{ goodsDetails.brandname }}
				</view>
				<view class="type">
					<text class="tag">类别</text>{{ goodsDetails.cat_one_name }}
				</view>
				<view class="weight">
					<text class="tag">重量</text>{{ goodsDetails.weight }}g
				</view>
				<view class="uptime">
					<text class="tag">上架时间</text>{{ new Date(goodsDetails.add_time * 1000).toLocaleDateString() }}
				</view>
			</view>
			<!-- 商品介绍 -->
			<view class="introduce-container">
				<text class="tag">商品介绍</text>
				<view @click="toggleIntroduce" class="toggle-introduce">
					{{ showFullIntroduce ? '收起' : '展开' }}
				</view>
				<view v-if="showFullIntroduce" v-html="goodsDetails.introduce"></view>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<view class="goods-carts">
			<uni-goods-nav @click="onClick" @buttonClick='btnClick' />
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';

	// 商品ID
	let goodsId = ref(0);
	// 购买数量
	let buyNum = ref(1);
	// 商品详情数据
	let goodsDetails = ref({});
	// 控制商品介绍的显示
	let showFullIntroduce = ref(false);

	// 页面加载时获取路由参数
	onLoad((data) => {
		goodsId.value = data.id;
		getGoodsDetails(data.id);
	});

	// 查询商品详情 
	async function getGoodsDetails(id) {
		let res = await uni.$post("/goodInfoById", { id });
		if (res.code === 200) {
			goodsDetails.value = res.goodsList[0];
			goodsDetails.value.goods_big_logo = uni.$base_url + goodsDetails.value.goods_big_logo;
		} else {
			uni.showToast({ title: '获取商品信息失败', icon: 'none' });
		}
	}

	// 减少数量
	function reduceNum() {
		if (buyNum.value > 1) {
			buyNum.value--;
		} else {
			uni.showModal({
				title: '提示',
				content: '数量不能少于1，是否要删除该商品？',
				success: (res) => {
					if (res.confirm) {
						// 删除商品逻辑
					}
				}
			});
		}
	}

	// 增加数量
	function addNum() {
		if (buyNum.value < goodsDetails.value.number) {
			buyNum.value++;
			uni.showToast({ title: `当前选择数量: ${buyNum.value}`, icon: 'none' });
		} else {
			uni.showToast({ title: '超过可购买数量', icon: 'none' });
		}
	}
	// 切换商品介绍的显示
	function toggleIntroduce() {
		showFullIntroduce.value = !showFullIntroduce.value;
	}
</script>

<style lang="scss">
	.goods-details {
		background-color: #f9f9f9;
		padding: 20px;
	}

	.details {
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
		padding: 20px;
		margin-bottom: 20px;
	}

	.logo-container {
		margin-bottom: 15px;
	}

	.logo-image {
		height: 220px;
		width: 100%;
		border-radius: 12px;
	}

	.price-container {
		margin-bottom: 12px;
	}

	.price {
		color: #e63946;
		font-size: 26px;
		font-weight: bold;
	}

	.name-container {
		margin-bottom: 12px;
	}

	.name {
		color: #333;
		font-size: 22px;
	}

	.num-container {
		display: flex;
		align-items: center;
		margin-bottom: 20px;

		.tag {
			margin-right: 10px;
			color: #666;
		}

		.num-oper {
			display: flex;
			align-items: center;
			border: 1px solid #ccc;
			border-radius: 5px;
			overflow: hidden;
			margin-left: auto;

			.num-button {
				padding: 8px 12px;
				cursor: pointer;
				background-color: #f0f0f0;
				transition: background-color 0.3s;

				&:hover {
					background-color: #e0e0e0;
				}
			}

			.num-display {
				padding: 8px 12px;
				color: #333;
				font-weight: bold;
			}
		}
	}

	.info-container {
		margin-bottom: 20px;

		.tag {
			color: #007aff;
			font-weight: bold;
		}
	}

	.introduce-container {
		margin-top: 20px;

		.toggle-introduce {
			color: #007aff;
			cursor: pointer;
			margin-top: 5px;
			font-weight: bold;
		}
	}

	.goods-carts {
		margin-top: 20px;
	}
</style>